<script lang="ts">
  import { files as projectTemplate } from './stackblitz-template'
  import sdk from '@stackblitz/sdk'

  interface Props {
    files: Record<string, string>
  }

  let { files }: Props = $props()

  const projectFiles: Record<string, string> = {}
  for (const path in files) {
    const newPath = `src/example/${path}`
    projectFiles[newPath] = files[path] as string
  }

  const onclick = () => {
    sdk.openProject(
      {
        title: 'Some title',
        description: 'Some description',
        files: {
          ...projectTemplate,
          ...projectFiles
        },
        template: 'node'
      },
      {
        openFile: 'src/example/App.svelte'
      }
    )
  }
</script>

<button
  class="rounded-xs border-orange/5 text-orange focus:outline-hidden border bg-orange-800/50 px-2 py-1 text-sm hover:bg-orange-800/70 hover:text-orange-400 hover:underline"
  aria-label="open in stackblitz"
  {onclick}
>
  <svg
    class="*:fill-current!"
    width="99"
    height="20"
    viewBox="0 0 99 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6.00084 11.8188H0L10.9693 0L8.01714 8.18289H14.0187L3.04798 20L6.00084 11.8188Z"
      fill="white"
    />
    <path
      d="M25.0161 13.1569L27.2453 11.8647C27.6492 12.8017 28.3438 13.4316 29.6198 13.4316C30.8476 13.4316 31.1544 12.9471 31.1544 12.5108C31.1544 11.8163 30.5083 11.5418 28.8121 11.0732C27.1322 10.6046 25.4845 9.79716 25.4845 7.63244C25.4845 5.45177 27.326 4.19168 29.2807 4.19168C31.1384 4.19168 32.592 5.08015 33.416 6.74398L31.2354 8.02002C30.8476 7.21234 30.3146 6.71166 29.2807 6.71166C28.473 6.71166 28.0691 7.1154 28.0691 7.56781C28.0691 8.08465 28.3438 8.44012 30.1045 8.97312C31.8168 9.48996 33.739 10.0878 33.739 12.4785C33.739 14.6592 31.9946 15.9514 29.5392 15.9514C27.1645 15.9514 25.6461 14.8206 25.0161 13.1569Z"
      fill="white"
    />
    <path
      d="M37.778 9.97469V12.834C37.778 13.5286 38.3759 13.593 39.4421 13.5286V15.7254C36.276 16.0485 35.3552 15.0954 35.3552 12.834V9.97469H34.063V7.6486H35.3552V6.11404L37.7782 5.38715V7.6486H39.4423V9.97469H37.778Z"
      fill="white"
    />
    <path
      d="M48.9398 7.64859V15.7254H46.5168V14.9662C45.9838 15.58 45.192 15.9514 44.1097 15.9514C41.9936 15.9514 40.249 14.0939 40.249 11.6868C40.249 9.2799 41.9936 7.42218 44.1097 7.42218C45.192 7.42218 45.9836 7.79381 46.5168 8.40759V7.64839H48.9398V7.64859ZM46.517 11.6868C46.517 10.4754 45.7093 9.71616 44.5948 9.71616C43.4801 9.71616 42.6725 10.4754 42.6725 11.6868C42.6725 12.8984 43.4801 13.6576 44.5948 13.6576C45.7091 13.6576 46.517 12.8984 46.517 11.6868Z"
      fill="white"
    />
    <path
      d="M50.3135 11.6868C50.3135 9.2799 52.1387 7.42218 54.5942 7.42218C56.1609 7.42218 57.5503 8.24602 58.245 9.48975L56.1286 10.7175C55.8541 10.152 55.2724 9.8129 54.5619 9.8129C53.5121 9.8129 52.7367 10.5721 52.7367 11.6866C52.7367 12.8012 53.5121 13.5605 54.5619 13.5605C55.2726 13.5605 55.8701 13.2211 56.1286 12.6558L58.245 13.8674C57.5505 15.1273 56.1775 15.9512 54.5942 15.9512C52.1387 15.9514 50.3135 14.0939 50.3135 11.6868Z"
      fill="white"
    />
    <path
      d="M64.2222 15.7252L61.6376 12.1551V15.7252H59.2144V4.41788H61.6376V11.1861L64.0608 7.64859H66.8874L63.9477 11.687L66.9682 15.7254H64.2222V15.7252Z"
      fill="white"
    />
    <path
      d="M76.3382 12.4137C76.3382 14.4168 74.7067 15.7252 72.6874 15.7252H67.9385V4.41788H72.3642C74.3353 4.41788 75.9343 5.69392 75.9343 7.64859C75.9343 8.58553 75.5628 9.32858 74.9489 9.86157C75.7888 10.3946 76.3382 11.2667 76.3382 12.4137ZM70.5231 6.84091V8.84385H72.3642C72.9459 8.84385 73.3497 8.42395 73.3497 7.84248C73.3497 7.26101 72.9621 6.84112 72.3642 6.84112H70.5231V6.84091ZM73.7536 12.22C73.7536 11.59 73.3337 11.1378 72.6874 11.1378H70.5231V13.3023H72.6874C73.3337 13.3023 73.7536 12.8499 73.7536 12.22Z"
      fill="white"
    />
    <path
      d="M77.5498 3.93314H79.9726V15.7252H77.5498V3.93314Z"
      fill="white"
    />
    <path
      d="M81.5078 5.48384C81.5078 4.69232 82.1701 4.03006 82.9614 4.03006C83.7531 4.03006 84.4154 4.69232 84.4154 5.48384C84.4154 6.27536 83.7531 6.93762 82.9614 6.93762C82.1703 6.93762 81.5078 6.27536 81.5078 5.48384ZM81.75 7.64856H84.1732V15.7253H81.75V7.64856Z"
      fill="white"
    />
    <path
      d="M89.019 9.97469V12.834C89.019 13.5286 89.6171 13.593 90.6833 13.5286V15.7254C87.5172 16.0485 86.5964 15.0954 86.5964 12.834V9.97469H85.3042V7.6486H86.5964V6.11404L89.0192 5.38715V7.6486H90.6835V9.97469H89.019Z"
      fill="white"
    />
    <path
      d="M98.2754 13.4639V15.7254H91.814V14.1098L94.8667 9.91005H91.9753V7.64859H98.1136V9.26395L95.0608 13.4639H98.2754Z"
      fill="white"
    />
  </svg>
</button>
